<%@ page contentType="text/html; charset=UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ include file="/view/common/init.jsp"%>
<title>Thông tin thuê bao</title>
<script type="text/javascript" src="<c:out value="${pageContext.request.contextPath}"/>/js/filter.js"></script>
<script type="text/javascript">
	var countryId = <c:out value="${countryId}"/>;
	var areaId = <c:out value="${areaId}"/>;
	var provinceId = <c:out value="${provinceId}"/>;
	var cellId = <c:out value="${cellId}"/>;
	
	window.onload = function() {
		new Ajax.Request(base_url + 'agent/cellList.do', {
			method : 'post',
			onSuccess : function(transport) {
				var data = transport.responseText.evalJSON();
				// Init Countries combo
				pushValueToCountryCombo(data.countries);
				
				// Init Area combo
				pushValueToAreaCombo(data.areas);
				
				// Init Province combo
				pushValueToProvinceCombo(data.provinces);	
				
				// Init cell combo
				pushValueToCellCombo(data.agents);
			},
			onFailure : function() {
				alert('Something went wrong...')
			}
		});		
	<c:if test="${loginUser.roleViewGraphicalReports}">
		<c:out value="${data}" escapeXml="false" />;
		var activityChart = new JSChart('activityChart', 'line');
		activityChart.setAxisNameX('Ngày');
		activityChart.setAxisNameY('');
		activityChart.setTitle('');
		activityChart.setDataArray(dataActivityChart);

		var callGeneratedChart = new JSChart('callGeneratedChart', 'line');
		callGeneratedChart.setAxisNameX('Ngày');
		callGeneratedChart.setAxisNameY('');
		callGeneratedChart.setTitle('');		
		callGeneratedChart.setDataArray(dataCallGeneratedChart);

		var callGeneratedMoreChart = new JSChart('callGeneratedMoreChart', 'line');
		callGeneratedMoreChart.setAxisNameX('Ngày');
		callGeneratedMoreChart.setAxisNameY('');
		callGeneratedMoreChart.setTitle('');
		callGeneratedMoreChart.setDataArray(dataCallGeneratedMoreChart);

		var changeServingCellChart = new JSChart('changeServingCellChart', 'line');
		changeServingCellChart.setAxisNameX('Ngày');
		changeServingCellChart.setAxisNameY('');
		changeServingCellChart.setTitle('');
		changeServingCellChart.setDataArray(dataChangeServingCellChart);
						
		var newActiveChart = new JSChart('newActiveChart', 'line');
		newActiveChart.setAxisNameX('Ngày');
		newActiveChart.setAxisNameY('');
		newActiveChart.setTitle('');
		newActiveChart.setDataArray(dataNewActiveChart);

		var newCallGeneratedChart = new JSChart('newCallGeneratedChart', 'line');
		newCallGeneratedChart.setAxisNameX('Ngày');
		newCallGeneratedChart.setAxisNameY('');
		newCallGeneratedChart.setTitle('');
		newCallGeneratedChart.setDataArray(dataNewCallGeneratedChart);

		var samplesGoodChart = new JSChart('samplesGoodChart', 'line');
		samplesGoodChart.setAxisNameX('Ngày');
		samplesGoodChart.setAxisNameY('');
		samplesGoodChart.setTitle('');
		samplesGoodChart.setDataArray(dataSamplesGoodChart);

		var samplesQualityGoodChart = new JSChart('samplesQualityGoodChart', 'line');
		samplesQualityGoodChart.setAxisNameX('Ngày');
		samplesQualityGoodChart.setAxisNameY('');
		samplesQualityGoodChart.setTitle('');
		samplesQualityGoodChart.setDataArray(dataSamplesQualityGoodChart);

		var callSucceedChart = new JSChart('callSucceedChart', 'line');
		callSucceedChart.setAxisNameX('Ngày');
		callSucceedChart.setAxisNameY('');
		callSucceedChart.setTitle('');
		callSucceedChart.setDataArray(dataCallSucceedChart);

		<c:out value="${toolTip}" escapeXml="false" />;
		activityChart.draw();
		callGeneratedChart.draw();
		callGeneratedMoreChart.draw();
		changeServingCellChart.draw();
		newActiveChart.draw();
		newCallGeneratedChart.draw();
		samplesGoodChart.draw();
		samplesQualityGoodChart.draw();
		callSucceedChart.draw();
		
	</c:if>

											
						
	};	
</script>
<s:form action="index.do" method="get" name="agentIndexForm" id="agentIndexForm">
<center>
	<div class="header">THÔNG TIN THUÊ BAO</div>
	<div id="comboChoose">
		<div class="item">
			<select name="countryId" id="comboCountry" onchange="filterCountry();" style="width: 130px;">
				<option value="0">--Chọn quốc gia--</option>
			</select>
		</div>
		<div class="item">
			<select name="areaId" id="comboArea" onchange="filterArea();" style="width: 130px;">
				<option value="0">----Chọn miền----</option>
			</select>
		</div>
		<div class="item">
			<select name="provinceId" id="comboProvince" onchange="filterProvince();" style="width: 130px;">
				<option value="0">----Chọn tỉnh----</option>
			</select>
		</div>
		<div class="item">
			<select name="cellId" id="comboCell" style="width: 130px;">
				<option value="0">----Chọn Cell----</option>
			</select>
		</div>
	</div>
	<div class="clear-both"><span></span></div>
	<div style="padding-top: 50px;text-align: center;width: 500px;">
		<div style="float: left;width: 60px;text-align: right;">Từ ngày</div>
		<div style="float: left;width: 130px;">
				<!-- calendar attaches to existing form element -->
				<input id="fromDate" style="width: 80px;"  type="text" name="fromDate" value="<c:out value="${fromDate}"/>" readonly="readonly"/>
				<script language="JavaScript">
					new tcal ({
						// form name
						'formname': 'agentIndexForm',
						// input name
						'controlname': 'fromDate'
					});	
				</script>
		</div>
		<div style="float: left;width: 60px;text-align: right;">Đến ngày</div>	
		<div style="float: left;width: 130px;">
				<!-- calendar attaches to existing form element -->
				<input id="toDate" style="width: 80px;" type="text" name="toDate" value="<c:out value="${toDate}"/>" readonly="readonly"/>
				<script language="JavaScript">
					new tcal ({
						// form name
						'formname': 'agentIndexForm',
						// input name
						'controlname': 'toDate'
					});	
				</script>
		</div>
		<div style="float: left;width: 100px;text-align: right;">
			<button id="bntChoose" type="button" onclick="checkDateForIndexForm($('fromDate').value, $('toDate').value);">Chọn</button>
		</div>			
	</div>
	<div class="clear-both"><span></span></div>
	<div style="width: 740px;margin-top: 80px;">
		<div style="width: 370px;float: left;">
			<table class="tbl_info">
				<tr><td class="hed" colspan="2">THÔNG TIN THUÊ BAO TÍNH ĐẾN NGÀY <c:out value="${toDate}"/></td></tr>
				<tr>
					<td>Phần trăm thuê bao đang hoạt động</td>
					<td>
					
						<c:out value="${agentPercent.percentAgentsActivityStr}"/>%
					</td>
				</tr>
				<tr>
					<td>Phần trăm thuê bao phát sinh cuộc gọi</td>
					<td><c:out value="${agentPercent.percentAgentsCallGeneratedStr}"/>%</td>
				</tr>
				<tr>
					<td>Phần trăm thuê bao phát sinh nhiều cuộc gọi</td>
					<td><c:out value="${agentPercent.percentAgentsCallGeneratedMoreStr}"/>%</td>
				</tr>
				<tr>
					<td>Phần trăm thuê bao thay đổi serving cell</td>
					<td><c:out value="${agentPercent.percentAgentsChangeServingCellStr}"/>%</td>
				</tr>
				<tr>
					<td>Phần trăm thuê bao activated mới</td>
					<td><c:out value="${agentPercent.percentAgentsNewActiveStr}"/>%</td>
				</tr>
				<tr>
					<td>Phần trăm thuê bao activate mới phát sinh cuộc gọi </td>
					<td><c:out value="${agentPercent.percentAgentsNewCallGeneratedStr}"/>%</td>
				</tr>
				<tr>
					<td>Phần trăm số mẫu có cường độ sóng tốt  </td>
					<td><c:out value="${grxPercent.percentSamplesGoodStr}"/>%</td>
				</tr>																								
				<tr>
					<td>Phần trăm số mẫu có chất lượng sóng tốt </td>
					<td><c:out value="${grxQualityPercent.percentSamplesGoodStr}"/>%</td>
				</tr>									
				<tr>
					<td>Phần trăm CSR (tỉ lệ cuộc gọi thành công)</td>
					<td><c:out value="${csrPercent.percentCallSucceededStr}"/>%</td>
				</tr>													
			</table>
		</div>
		<div style="width: 370px;float: right;">
			<table class="tbl_info">
				<tr><td class="hed" colspan="2">CÁC CẢNH BÁO TÍNH ĐẾN NGÀY <c:out value="${toDate}"/></td></tr>
				<tr>
					<td>
						<c:choose>  
							<c:when test='${agentNoActivityNumber eq 0}'>  
								Số luợng thuê bao không hoạt động
							</c:when>  
							<c:otherwise>  
								<a href="<c:out value="${pageContext.request.contextPath}"/>/agent/alert.do?typeAlert=noActivity">Số luợng thuê bao không hoạt động</a>
							</c:otherwise> 
						</c:choose>
					</td>
					<td><c:out value="${agentNoActivityNumber}"/></td>
				</tr>
				<tr>
					<td>
						<c:choose>  
							<c:when test='${agentNoCallGeneratedNumber eq 0}'>  
								Số thuê bao đang hoạt động không phát sinh cuộc gọi
							</c:when>  
							<c:otherwise>  
								<a href="<c:out value="${pageContext.request.contextPath}"/>/agent/alert.do?typeAlert=noCallGenerated">Số thuê bao đang hoạt động không phát sinh cuộc gọi</a>
							</c:otherwise> 
						</c:choose>					
					</td>
					<td><c:out value="${agentNoCallGeneratedNumber}"/></td>
				</tr>
				<tr>
					<td>
						<c:choose>  
							<c:when test='${agentChangeServingCellNumber eq 0}'>  
								Số thuê bao thay đổi serving cell
							</c:when>  
							<c:otherwise>  
								<a href="<c:out value="${pageContext.request.contextPath}"/>/agent/alert.do?typeAlert=changeServingCell">Số thuê bao thay đổi serving cell
							</c:otherwise> 
						</c:choose>							
					</td>
					<td><c:out value="${agentChangeServingCellNumber}"/></td>
				</tr>
				<tr>
					<td>
						<c:choose>  
							<c:when test='${agentUseWeakRxNumber eq 0}'>  
								Số thuê bao sử dụng sóng yếu
							</c:when>  
							<c:otherwise>  
								<a href="<c:out value="${pageContext.request.contextPath}"/>/agent/alert.do?typeAlert=useWeakRx">Số thuê bao sử dụng sóng yếu</a>
							</c:otherwise> 
						</c:choose>						
					</td>
					<td><c:out value="${agentUseWeakRxNumber}"/></td>
				</tr>
				<tr>
					<td>
						<c:choose>  
							<c:when test='${agentLowCsrNumber eq 0}'>  
								Số thuê bao có tỉ lệ CSR thấp
							</c:when>  
							<c:otherwise>  
								<a href="<c:out value="${pageContext.request.contextPath}"/>/agent/alert.do?typeAlert=lowCsr">Số thuê bao có tỉ lệ CSR thấp</a>
							</c:otherwise> 
						</c:choose>						 
					</td>
					<td><c:out value="${agentLowCsrNumber}"/></td>
				</tr>									
				<tr>
					<td>
						<c:choose>  
							<c:when test='${agentUseWeakRxQualityNumber eq 0}'>  
								Số thuê bao sử dụng sóng chất lượng tồi  
							</c:when>  
							<c:otherwise>  
								<a href="<c:out value="${pageContext.request.contextPath}"/>/agent/alert.do?typeAlert=useWeakRxQuality">Số thuê bao sử dụng sóng chất lượng tồi  </a>
							</c:otherwise> 
						</c:choose>							
					</td>
					<td><c:out value="${agentUseWeakRxQualityNumber}"/></td>
				</tr>													
			</table>		
		</div>
	</div>
	<div class="clear-both"><span></span></div>
<c:if test="${loginUser.roleViewGraphicalReports}">
	<div style="width: 840px;margin-top: 80px;">
		<div class="left" style="width: 400px;">
			<div id="activityChart"></div>
			<div style="text-align: center;">Phần trăm thuê bao đang hoạt động</div>
		</div>
		<div class="right" style="width: 400px;">
			<div id="callGeneratedChart"></div>
			<div style="text-align: center;">Phần trăm thuê bao phát sinh cuộc gọi</div>		
		</div>
	</div>	
	<div class="clear-both"><span></span></div>
	<div style="width: 840px;margin-top: 80px;">
		<div class="left" style="width: 400px;">
			<div id="callGeneratedMoreChart"></div>
			<div style="text-align: center;">Phần trăm thuê bao phát sinh nhiều cuộc gọi</div>
		</div>
		<div class="right" style="width: 400px;">
			<div id="changeServingCellChart"></div>
			<div style="text-align: center;">Phần trăm thuê bao thay đổi serving cell</div>		
		</div>
	</div>
	<div class="clear-both"><span></span></div>
	<div style="width: 840px;margin-top: 80px;">
		<div class="left" style="width: 400px;">
			<div id="newActiveChart"></div>
			<div style="text-align: center;">Phần trăm thuê bao actived mới</div>
		</div>
		<div class="right" style="width: 400px;">
			<div id="newCallGeneratedChart"></div>
			<div style="text-align: center;">Phần trăm thuê bao actived mới phát sinh cuộc gọi trong ngày</div>		
		</div>
	</div>		
	<div class="clear-both"><span></span></div>
	<div style="width: 840px;margin-top: 80px;">
		<div class="left" style="width: 400px;">
			<div id="samplesGoodChart"></div>
			<div style="text-align: center;">Phần trăm số mẫu có cường độ sóng tốt</div>
		</div>
		<div class="right" style="width: 400px;">
			<div id="samplesQualityGoodChart"></div>
			<div style="text-align: center;">Phần trăm số mẫu có chất lượng sóng tốt</div>		
		</div>
	</div>	
	<div class="clear-both"><span></span></div>
	<div style="width: 840px;margin-top: 80px;">
		<div class="left" style="width: 400px;">
			<div id="callSucceedChart"></div>
			<div style="text-align: center;">Phần trăm CSR (tỉ lệ cuộc gọi thành công)</div>
		</div>
	</div>		
</c:if>
	
</center>
</s:form>